﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/datapattern.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>
        $(function () {
            $("#divAdd").css("display", "none");
            $("#editDiv").css("display", "none");
            //加载数据
            loadData();
        })

        //分页加载数据
        function loadData() {
            $('#tt').datagrid({
                url: '/RoleInfo/GetRoleInfo',
                title: '用户数据表格',
                width: 700,
                height: 400,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'ID',//主键列的列明
                loadMsg: '正在加载角色的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 5,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 15],
                queryParams: {},//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
					{ field: 'ID', title: '编号', width: 80 },
					{ field: 'RoleName', title: '角色名称', width: 120 },
                     { field: 'Sort', title: '排序', width: 120 },
                      { field: 'Remark', title: '备注', width: 120 },
					{
					    field: 'SubTime', title: '时间', width: 80, align: 'right',
					    formatter: function (value, row, index) {
					        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
					    }
					},
                    
                ]],
                toolbar: [{
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteInfo();
                    }
                }, {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        addInfo();
                    }
                }, {
                    id: 'btnEdit',
                    text: '编辑',
                    
                    iconCls: 'icon-edit',
                    handler: function () {
                        editInfo();
                    }
                }],
            });
        }


        //添加数据，显示添加窗口
        function addInfo() {
            $("#divAdd").css("display", "block");
            $('#divAdd').dialog({
                title: "添加信息",
                collapsible: true,
                width: 300,
                height: 200,
                modal: true,
                resizable: true,
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        $("#addForm").submit();
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#divAdd').dialog('close');
                    }
                }]
            });

        }
        //单机添加按钮之后 执行添加操作
        function afterAddSuccess(data) {
            if (data == 'ok') {
                //关闭添加窗口
                $('#divAdd').dialog('close');
                //清空表单中的数据
                $('#addForm input').val('');
                loadData();
            }
        }

        //删除操作
        function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');
            //如果没有选中要删除的记录
            if (rows.length == 0 || !rows) {
                $.messager.alert('提醒', '请选择要删除的记录!', 'error');
                return;
            }

            $.messager.confirm('提示', '确定要删除么?', function (r) {
                //r代表了用户点击的操作，TRUE代表了确定，FALSE代表了取消
                if (r) {
                    var strId = '';
                    //将所选中的Id全部都拼接成一个string
                    for (var i = 0; i < rows.length; i++) {
                        strId += rows[i].ID + ',';
                    }
                    strId = strId.substr(0, strId.length - 1);
                    $.post('/RoleInfo/DeleteRoleInfo', { "strId": strId }, function (data) {
                        if (data == "ok") {
                            $('#tt').datagrid('clearSelections');
                            $('#tt').datagrid('reload');
                            $.messager.show({
                                title: '提示',
                                msg: '删除成功',
                                showType: 'show'
                            });
                        }
                        else {
                            $.messager.alert("提示", "删除失败", "error");
                        }
                    })
                }
            });


        }

        //单击修改操作，渲染修改模块
        function editInfo() {
            //判断用户选择是否符合规则
            var rows = $('#tt').datagrid('getSelections');
            if (rows.length != 1) {
                $.messager.alert("提醒", "请选择一条数据，不能多选也不能不选!", "error");
                return;
            }
            
            //得到要修改的ID
            $("#editFrame").attr("src", "/RoleInfo/EditInfo/?id=" + rows[0].ID);
            //弹出修改窗体
            $("#editDiv").css("display", "block");
            $('#editDiv').dialog({
                title: "修改信息",
                collapsible: true,
                width: 300,
                height: 400,
                modal: true,
                resizable: true,
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        var childWindow = $("#editFrame")[0].contentWindow;//获取子窗体的window对象.
                        childWindow.subForm();//调用子窗体中的subForm方法.
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#editDiv').dialog('close');
                    }
                }]
            });

        }

        //修改完成以后调用该方法
        function afterEdit(data) {
            if (data == "ok") {
                $('#editDiv').dialog('close');
                $('#tt').datagrid('clearSelections');
                $('#tt').datagrid('reload');
                $.messager.show({
                    title: '提示',
                    msg: '修改成功',
                    showType: 'show'
                });
            } else {
                $.messager.alert("提醒", "修改失败!", "error");
            }

        }

        //将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    </script>

</head>
<body>
    <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>

    <!-------------------------------------------------------------添加角色开始-------------------------------------------------------------------->
    <div id="divAdd">
        @using (Ajax.BeginForm("AddRoleInfo", "RoleInfo", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAddSuccess" }, new { id = "addForm" }))
        {
            <table>
                <tr><td>角色名称</td><td><input type="text" name="RoleName" /></td></tr>
                <tr><td>排序</td><td><input type="text" name="Sort" /></td></tr>
                <tr><td>备注</td><td><input type="text" name="Remark" /></td></tr>
            </table>
        }
    </div>
    <!-------------------------------------------------------------添加角色结束-------------------------------------------------------------------->
    <!-------------------------------------------------------------添加角色开始-------------------------------------------------------------------->
    <div id="editDiv">
        <iframe id="editFrame" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>
    </div>

    <!-------------------------------------------------------------添加角色结束-------------------------------------------------------------------->

</body>
</html>
